<template>
	<div>
		<div class="map-container">
			<baidu-map ref="map" class="bm-view" :center="{ lng: 116.404, lat: 39.915 }" :zoom="zoom"
				:scroll-wheel-zoom="true" @zoomend="handleZoomChange" :pre-render="3">
				<bml-marker-clusterer :averageCenter="true" :styles="styles">
					<bm-marker v-for="marker of markers" :key="marker" :position="{lng: marker.lng, lat: marker.lat}"
						@dragend="updateMarker($event, marker)" :dragging="true"></bm-marker>
				</bml-marker-clusterer>
			</baidu-map>
			<button class="md-raised md-primary" @click="addMarker">添加一个随机点</button>
			<button class="md-raised md-primary" @click="removeMarker">删除上一个点</button>
			<button class="md-raised md-primary" @click="changeStyles">更换皮肤</button>
		</div>
	</div>
	<div class="mb-4">
		<el-button>Default</el-button>
		<el-button type="primary">Primary</el-button>
		<el-button type="success">Success</el-button>
		<el-button type="info">Info</el-button>
		<el-button type="warning">Warning</el-button>
		<el-button type="danger">Danger</el-button>
	</div>
</template>


<script setup>
	import {
		ref
	} from 'vue';
	import {
		BaiduMap,
		BmlMarkerClusterer
	} from 'vue-baidu-map-3x'

	const markers = ref([]);
	const styles = ref([]);
	const customStyles = ref(false);
	const zoom = ref(5)
	const addMarker = () => {
		for (let i = 0; i < 100; i++) {
			const position = {
				lng: Math.random() * 40 + 85,
				lat: Math.random() * 30 + 21
			};
			markers.value.push(position);
		}

	};
	const handleZoomChange = (e) => {
		zoom.value = e.target.getZoom(); // 正确获取方式
		console.log("当前缩放级别:", zoom.value);
	}
	const updateMarker = ({
		point
	}, marker) => {
		marker.lng = point.lng
		marker.lat = point.lat
	};
	const removeMarker = () => {
		markers.value.pop()
	};
	const changeStyles = () => {
		customStyles.value = !customStyles.value
		const EXAMPLE_URL = "http://api.map.baidu.com/library/MarkerClusterer/1.2/examples/"
		const stylesArr = [{
			url: EXAMPLE_URL + 'images/heart30.png',
			size: {
				width: 30,
				height: 26
			},
			opt_anchor: [16, 0],
			textColor: '#ff00ff',
			opt_textSize: 10
		}, {
			url: EXAMPLE_URL + 'images/heart40.png',
			size: {
				width: 40,
				height: 35
			},
			opt_anchor: [40, 35],
			textColor: '#ff0000',
			opt_textSize: 12
		}, {
			url: EXAMPLE_URL + 'images/heart50.png',
			size: {
				width: 50,
				height: 44
			},
			opt_anchor: [32, 0],
			textColor: 'white',
			opt_textSize: 14
		}]
		styles.value = customStyles.value ? stylesArr : []
	};

	const getMarkers = () => {
		for (let i = 0; i < 10; i++) {
			const position = {
				lng: Math.random() * 40 + 85,
				lat: Math.random() * 30 + 21
			}
			markers.value.push(position);
		}
	};

	getMarkers();
</script>

<style scoped>
	.map-container {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		overflow: hidden;
		z-index: 90;
	}

	.bm-view {
		width: 100%;
		height: 70%;
	}

	@media screen and (min-width: 3840px) {
		.bm-view {
			zoom: 1.5;
		}
	}

	.top-image {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 100;
		
	}

	.top-image img {
		width: 100%;
		height: auto;
		display: block;
	}

	.left-data-panel {
		position: fixed;
		top: 5%;
		height: 90%;
		width: 455px;
		margin: 0 30px;
		background-color: rgba(10, 25, 74, 0.92);
		z-index: 95;
		
		display: flex;
		justify-content: center;
		align-items: flex-start;
		left: 0;
		border: 4px solid;
		border-image: linear-gradient(45deg, #022128, #092e61) 1;
		box-shadow: 0 0 5px rgba(0, 210, 255, 0.4), 0 0 20px rgba(23, 99, 205, 0.2);
	}

	.right-data-panel {
		position: fixed;
		top: 5%;
		height: 90%;
		width: 360px;
		margin: 0 30px;
		background-color: rgba(7 16 46 / 92%);
		z-index: 95;
		
		right: 0;
		border: 1px solid;
		border-image: linear-gradient(45deg, #022128, #3a7bd5) 1;
	}

	.title {
		font-size: 50px;
		/* position: fixed; */
		/* left: 50%; */
		/* top: 5%; */
		/* transform: translate(-50%, -50%); */
		margin: 10px 40px;
		color: #ffffff;
		text-align: center;
		width: fit-content;
	}

	.bottom-buttons {
		position: fixed;
		bottom: 20px;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		gap: 20px;
		z-index: 100;
	}

	.bottom-buttons button {
		width: 140px;
		height: 60px;
		background-color: transparent;
		background-image: url('https://dtiotkecheng.hzsafer.com:56280/img/morenaniu.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		border: none;
		color: #ffffff;
		font-size: 18px;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.bottom-buttons button:hover {
		background-image: url('https://dtiotkecheng.hzsafer.com:56280/img/jihuo.png');
	}

	.bottom-image {
		position: fixed;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 1920px;
		height: 90px;
		background-image: url('https://dtiotkecheng.hzsafer.com:56280/img/di.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		z-index: 95;
		
	}
</style>